<template>
  <div>
    <van-form
      style="padding-bottom: 60px"
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        v-model="obj.name"
        name="name"
        label="名称"
        required
        label-width="60%"
        input-align="right"
        placeholder="点击填写"
        :rules="[{ required: true, message: '请输入名称' }]"
      />
      <van-field
        required
        readonly
        is-link
        input-align="right"
        :value="breedName"
        name="type"
        label="农资类型"
        placeholder="请选择"
        :rules="[{ required: true, message: '请选择农资类型' }]"
        @click="openChoose()"
      />

      <van-popup v-model="natureShows1" position="bottom">
        <van-picker
          show-toolbar
          :columns="varietiesList"
          value-key="name"
          @confirm="onConfirmType"
          @cancel="natureShows1 = false"
        />
      </van-popup>

      <van-field
        required
        name="shareTypeCode"
        label="共享方式"
        :rules="[{ required: true, message: '请选择共享方式' }]"
      >
        <template #input>
          <van-checkbox-group v-model="obj.shareTypeCode" direction="horizontal">
            <van-checkbox
              v-for="(item, index) in gxfsList"
              :key="index"
              :name="item.code"
              checked-color="#37b5b5"
              shape="square"
              >{{ item.name }}</van-checkbox
            >
          </van-checkbox-group>
        </template>
      </van-field>

      <van-field
        v-if="obj.shareTypeCode.indexOf('T000010_SHARE_TYPE_SELL') != -1"
        v-model="obj.sellPrice"
        name="sellPrice"
        label="出售价格"
        required
        label-width="60%"
        input-align="right"
        placeholder="点击填写"
        :rules="[{ required: true, message: '请输入出售价格' }]"
      />
      <div v-if="obj.shareTypeCode.indexOf('T000010_SHARE_TYPE_SHARE') != -1">
        <van-field
          v-model="obj.sharePrice"
          name="sharePrice"
          label="共享价格"
          required
          label-width="60%"
          input-align="right"
          placeholder="点击填写"
          :rules="[{ required: true, message: '请输入共享价格' }]"
        />

        <van-field
          required
          readonly
          is-link
          input-align="right"
          :value="gradeName"
          name="unitCode"
          label="价格单位"
          placeholder="请选择"
          :rules="[{ required: true, message: '请选择价格单位' }]"
          @click="openChoose2()"
        />
        <van-popup v-model="natureShows2" position="bottom">
          <van-picker
            show-toolbar
            :columns="levelList"
            value-key="name"
            @confirm="onConfirmType2"
            @cancel="natureShows2 = false"
          />
        </van-popup>
        <van-field
          v-model="obj.ensureMoney"
          name="ensureMoney"
          label="保证金"
          required
          label-width="60%"
          input-align="right"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入保证金' }]"
        />
        <van-field
          v-model="obj.productNum"
          name="productNum"
          label="共享数量"
          required
          label-width="60%"
          input-align="right"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入共享数量' }]"
        />
      </div>

      <van-field
        required
        name="deliveryMethod"
        label="收货方式"
        :rules="[{ required: true, message: '请选择收获方式' }]"
      >
        <template #input>
          <van-radio-group v-model="obj.deliveryMethod" direction="horizontal">
            <van-radio checked-color="#37b5b5" name="0">自提</van-radio>
            <van-radio checked-color="#37b5b5" name="1">快递</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="obj.pickUpAddress"
        name="pickUpAddress"
        label="供货地址"
        required
        label-width="60%"
        input-align="right"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入供货地址' }]"
      />
      <van-field
        v-model="obj.contactPeople"
        name="contactPeople"
        label="联系人"
        required
        label-width="60%"
        input-align="right"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入联系人' }]"
      />
      <van-field
        v-model="obj.contactNumber"
        name="contactNumber"
        label="联系电话"
        required
        label-width="60%"
        input-align="right"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入联系电话' }]"
      />
      <van-field required name="isFreePostage" label="运费设置">
        <template #input>
          <van-radio-group v-model="obj.isFreePostage" direction="horizontal">
            <van-radio checked-color="#37b5b5" name="0">设置邮费</van-radio>
            <van-radio checked-color="#37b5b5" name="1">包邮</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-if="obj.isFreePostage == 0"
        v-model="obj.postage"
        name="postage"
        required
        label="邮寄费用"
        label-width="50%"
        input-align="right"
        placeholder="请输入邮寄费用"
        :rules="[{ required: true, message: '请输入邮寄费用' }]"
      />
      <!-- <van-field
        v-model="result"
        is-link
        readonly
        required
        name="result"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
        :rules="[{ required: true, message: '请选择省市区' }]"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="onConfirm3" @cancel="showArea = false" />
      </van-popup> -->

      <van-field
        class="imgSty"
        input-align="left"
          required
          name="imgPath"
          label="图片"
          :rules="[{ required: true, message: '请选择图片' }]"

      >
        <template #input>
          <upload-img v-model="obj.imgPath" :maxCount="1" :isDetails="false"></upload-img>
          <div class="tip">注：支持格式JPG、JPEG、PNG，最多上传1张照片，单个不超 过5M。</div>
        </template>
      </van-field>
      <van-field
        v-model="obj.introduce"
        name="introduce"
        label="详情"
        type="textarea"
        required
        input-align="left"
        rows="4"
        maxlength="100"
        placeholder="请输入详情"
        :rules="[{ required: true, message: '请输入详情' }]"
      />
      <div class="spacing" />

      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >发布</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell,
  Area,
  Checkbox,
  CheckboxGroup
} from 'vant'
import UploadImg from '@/components/uploadImg'
import dayjs from 'dayjs'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { getHandle, postHandle } from '../../api'
import { breedList } from '@/api/supply'

import areaList from '@/utils/area.js'
export default {
  components: {
    UploadImg,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Area.name]: Area
  },
  data() {
    return {
      natureShows1: false,
      natureShows2: false,

      currentDate: new Date(),
      shareTypeCodeArr: [],
      loading: false,
      isDisabled: false,
      natureShows: false,
      natureNameList: [],
      natureShow: false,
      houseInfoId: getValue('fzmHourseId') || '',
      productName: {},
      showArea: false,
      areaList: areaList,
      breedName: '',
      gradeName: '',
      result: '',
      fileInfoList: [],
      obj: {
        tenantCode: getValue('tenantCode'),
        subjectInfoId: getValue('subjectInfoId'),
        name: '',
        type: '',
        sellPrice: '',
        sharePrice: '',
        productNum: '',
        unitCode: '',
        pickUpAddress: '',
        postage: '',
        imgPath: [],
        contactNumber: '',
        contactPeople: '',
        introduce: '',
        isFreePostage: '0',
        deliveryMethod: '0',
        shareTypeCode: ['T000010_SHARE_TYPE_SHARE', 'T000010_SHARE_TYPE_SELL']
      },
      type: null,
      varietiesList: [],
      levelList: [],
      gxfsList: []
    }
  },
  created() {
    this.loadZidian()
  },
  mounted() {},
  methods: {
    loadZidian() {
      breedList({ pCode: 'T000010_SHARE_TYPE' }).then(res => {
        if (res.status === 0) {
          const datas = res.data.options
          this.gxfsList = datas.map(item => {
            return {
              code: item.value,
              name: item.label
            }
          })
        }
      })
      breedList({ pCode: 'T000010_AGRICULTURE_TYPE' }).then(res => {
        if (res.status === 0) {
          const datas = res.data.options
          this.varietiesList = datas.map(item => {
            return {
              code: item.value,
              name: item.label
            }
          })
        }
      })
      breedList({ pCode: 'T000010_PRICE_UNIT' }).then(res => {
        if (res.status === 0) {
          const datas = res.data.options
          this.levelList = datas.map(item => {
            return {
              name: item.label,
              id: item.value
            }
          })
        }
      })
    },

    onSubmit() {
      this.loading = true
      // var str = ''
      // if (this.fileInfoList) {
      //   for (var i = 0; i < this.fileInfoList.length; i++) {
      //     str += this.fileInfoList[i].baseUrl + ','
      //   }
      // }
      // if (str.length > 0) {
      //   this.obj.uploadImgs = str.substr(0, str.length - 1)
      // }
      this.obj.shareTypeCode = this.obj.shareTypeCode.join(',')
      // if(typeof this.obj.imgPath[0] == 'object'){
      // }else{
      //   this.obj.imgPath = this.obj.imgPath.join(',')
      // }

        this.obj.imgPath = this.obj.imgPath.map(item => item.baseUrl).join(',')

      //this.obj.imgPath = '/fms/api/show/b079f4c5-d0cc-46c4-b0db-a3cf334bd6cd_0/1649924473145314.jpeg'

      postHandle('/agri/api/sshfw/agriculture/save', this.obj).then(res => {
        if (res.status == '0') {
          this.$toast(res.msg)

         this.$bridge.call('base.closePage')
        } else {
          this.$toast(res.msg)
        }
        setTimeout(() => {
          this.loading = false
        }, 1000)
      })

      // this.onSave()
    },
    // onConfirm3(values) {
    //   this.obj.provinceCode = values[0].name
    //   this.obj.cityCode = values[1].name
    //   this.obj.countyCode = values[2].name

    //   this.result = values
    //     .filter(item => !!item)
    //     .map(item => item.name)
    //     .join('/')

    //   this.showArea = false
    // },
    openChoose() {
      this.natureShows1 = true
    },
    onConfirmType(value) {
      this.natureShows1 = false
      this.obj.type = value
      this.breedName = value.name
    },
    openChoose2() {
      this.natureShows2 = true
    },
    onConfirmType2(value) {
      this.natureShows2 = false
      this.obj.unitCode = value.id
      this.gradeName = value.name
    },

    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    onSave(value) {
      this.loading = true

      postHandle('/agri/api/sshfw/agriculture/save', this.obj).then(res => {
        if (res.status == '0') {
          this.$toast(res.msg)

          this.$bridge.call('base.closePage')
        } else {
          // this.$toast(res.msg)
          Toast.fail(res.msg || '操作失败')
        }
        setTimeout(() => {
          this.loading = false
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .imgSty {
  display: block !important;
}
::v-deep .imgSty .van-field__control--left {
  display: block !important;
}
.shop {
  color: #fff;
}
.content {
  margin-top: 60px;
  background-color: #37b5b5 !important;
  justify-content: center !important;
}
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.btnfrom {
  padding: 14px 0;
}
.fromInput {
  width: 86%;
}
</style>
